<template>
  <div class="content" @click="fun(id)" >
      <div class="content_1">
          <div class="left">
              <h5>{{title|textstr}}</h5>
              <div class="time">
                  <p class="p1">{{source}}</p>
                  <p class="p2">{{time}}</p>
              </div>
          </div>
          <div class="right">
              <img :src="imgs">
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:['title','source','time','imgs','id','context'],
    filters:{
        textstr(title){
            if(title.length>11){
                return title.substr(0,11)+"..."
            }else{
                return title
            }
            
        }
    },
    methods:{
        fun(id){
            this.$router.push({path:'/newsinfo',query:{id}})
        }
    }

}
</script>

<style scoped>
.content{
    width:3.6rem;
    height:1.1rem;
    /* background-color: pink; */
    position: relative;
    border-bottom:1px solid #f4f4f4;
}
.content_1{
    width:3.36rem;
    height:0.78rem;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    display: flex;
}
.left{
    width:2.13rem;
    height:100%;
}
.right{
    width:1.23rem;
    height:100%;
}
.right img{
    display: block;
    width:100%;
    height:100%
}
h5{
    font-size:0.18rem;
    font-weight: normal;
}
.time{
    display: flex;
    justify-content: space-between;
    margin-top:0.2rem;
    box-sizing: border-box;
    padding:0 0.03rem
}
.p1{
    font-size:0.12rem;
    color:gray;
}
.p2{
    font-size:0.12rem;
    color:gray;
}
</style>